import type { Ref } from "vue";
import { onBeforeUnmount, onMounted, ref, markRaw } from "vue";
import * as echarts from "echarts";

// 封装自定义函数,用于处理图表相关逻辑
export function useChart(chartRef: Ref<HTMLElement | null>, setChartData: any) {
  // 创建一个响应式的图表实例
  const chartInstance = ref<echarts.ECharts | null>(null);
  // 创建一个响应式的图表选项
  // const ChartOptions = ref(initialOptions);

  const initChart = async () => {
    // 确保 chartRef 已经被赋值
    if (chartRef.value) {
      // 初始化图表实例
      chartInstance.value = markRaw(echarts.init(chartRef.value));

      // 拿到异步的传入函数 setChartData 的返回值, 这里假设 setChartData 返回一个 Promise，解析后得到图表的配置选项
      const options = await setChartData();

      // 设置图表选项
      chartInstance.value.setOption(options);
    }
  };

  // 创建自适应函数
  const resizeChart = () => {
    if (chartInstance.value) {
      chartInstance.value.resize();
    }
  };

  onMounted(() => {
    // 在组件挂载时初始化图表
    initChart();
    // 监听窗口大小变化，调整图表大小
    window.addEventListener("resize", resizeChart);
  });

  // 在组件卸载之前清除事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeChart);
    // 销毁图表实例
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  });
}
